<!DOCTYPE html>
<html >
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>王者荣耀</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            background-image: url("bg.jpg");
            background-position: center top;
            background-repeat: no-repeat;
        }
        .header-wrap{
            width: 100%;
            height: 84px;
            background-color: rgba(0,0,0,0.8);
            border-bottom: 1px solid #000;
        }

        .header{
            width: 1200px;
            height: 84px;
            margin: 0 auto;
            text-align: center;
        }
        .header > div,
        .header > ul{
            display: inline-block;
            vertical-align: middle;
            color: #c9c9dd;
        }

        .logo{
            width: 230px;
        }

        .menus li{
            display: inline-block;
            height: 64px;
            width: 110px;
            padding-top: 20px;
            cursor: pointer;
        }

        .menus li:hover{
            background-image: url("index.png");
        }

        .menus li span{
            display: block;
            font-size: 18px;
        }

        .menus li span:last-child{
            font-size: 12px;
            color: #858792;
            margin: 10px 0;
        }

        .login{
            padding-top: 10px;
        }
        .login .image{
            display: inline-block;
            vertical-align: middle;
            width: 44px;
            height: 44px;
            box-sizing: border-box;
        }

        .login .image img{
            border: 1px solid #d9ad50;
            border-radius: 42px;
        }

        .login .link{
            display: inline-block;
            vertical-align: middle;
            text-align: left;
        }

        .login .link span{
            display: block;
        }

        .login .link span:last-child{
            font-size: 12px;
            color: #858792;
            margin: 8px 0;
        }


    </style>
</head>
<body>
    <div  class="header-wrap">
        <div class="header">
            <div class="logo">
                <img src="logo.png" alt="">
            </div>
            <ul class="menus">
                <li>
                    <span>官网首页</span>
                    <span>HOME</span>
                </li>
                <li>
                    <span>游戏资料</span>
                    <span>DATA</span>
                </li>
                <li>
                    <span>内容中心</span>
                    <span>CONTENTS</span>
                </li>
                <li>
                    <span>赛事中心</span>
                    <span>MATCH</span>
                </li>
                <li>
                    <span>百态王者</span>
                    <span>CULTURE</span>
                </li>
                <li>
                    <span>社区活动</span>
                    <span>COMMUNITY</span>
                </li>
                <li>
                    <span>玩家支持</span>
                    <span>HOME</span>
                </li>
            </ul>
            <div class="login">
                <div class="image">
                    <img src="" alt="">
                </div>
                <div class="link">
                    <span>欢迎登录</span>
                    <span>登录后查看游戏战绩</span>
                </div>
            </div>    
        </div>
    </div>
</body>
</html>